@import"./_theme";
@import"./_init_pubstyle.scss";
body{
    background-color: rgb(233, 229, 229);
    .shleter {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 1000;
    }
}
.register{
    width: 368px;
    height: 500px;
    margin: 80px auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .option_reg{
        width: 300px;
        height: 30px;
        line-height:30px ;
        margin:20px auto;
        display: flex;
        :nth-child(1){
            display: inline-block;
            width: 50%;
            box-sizing: border-box;
            border-right: 1px solid $primary_color; 
            padding-left:20px;
            font-size: 18px;
            // ::before{
            //     content: "|";
            //     color: $primary_color;
            // }
        }
        :nth-child(2){
            width: 50%;
            box-sizing: border-box;
            color:  #999;
            text-indent: 65px;
            font-size: 18px;
        }
        
    }
    .content_reg{
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .code_reg{
            width: 300px;
            height:26px;
            font-size: 14px;
            color: rgb(112, 109, 109);
            line-height: 26px;
            text-align: right;
            &:hover{
                cursor: pointer;
                color: $primary_color;
            }
        }
        .phone_reg{
            margin-top: 10px;
            width: 300px;
            height: 38px;
            display: flex;
            border: 1px solid $border_color; 
            position: relative; 

            .img_phone{
                width: 30px;
                height: 38px;
                background: url(../img/phone.png) no-repeat 50%;
                // background-size: contain; 

            }
            #phone_text{
              width: 220px;
              font-size: 12px;
              color: #333;
              text-indent: 10px;
              border:none;
              outline: none;
            }
            .phone_test{
                font-size: 12px;
                color: red;
                position: absolute;
                bottom: -16px;
                display: none;
            }
        }

        .slide_verify{
            width: 300px;
            height: 38px;
            margin-top:20px;
            border: 1px solid $border_color;
            line-height: 38px;
            position: relative;
            background-color: #f2f2f2;
            &:hover .slide_img1{
            display: block;
            }
            &:hover .slide_img2{
            display: block;
            }
            
            >:nth-child(1){
                display: inline-block;
                position: absolute;
                left: 0px;
                top: 0px;
                width: 38px;
                height: 38px;
                border: 1px solid $border_color;
               
                box-sizing: 1px 1px 1px ,-1px 1px 1px ;
                background: #fff url(../img/jiantou.png) no-repeat 50%;
            }  
            :nth-child(2){
                display: inline-block;
                width: 160px;
                height: 38px;
                font-size: 14px;
                color:#45494c ;
                line-height: 38px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }  

            .slide_img1{
                width: 300px;
                height: 160px;
                position: absolute;
                left: -1px;
                bottom: -160px;
                display: none;
                z-index: 8;
                img{
                    width: 300px;
                height: 160px;
                }
            }
            .slide_img2{
                width:60px;
                height: 154px;
                position: absolute;
                left: -1px;
                bottom: -160px;
                z-index: 10;
                display: none;
                background: url(../img/滑块02.png) no-repeat 50%;
            }
        
        }
        .verify_code{
            width: 300px;
            height: 38px;
            margin-top:20px;
            display: flex;
            border: 1px solid $border_color;
            position: relative;
            #code{
                width: 200px;
                height: 38px;
                text-indent: 10px;
                border:none;
                outline: none;

            }
            .get_code{
                width: 100px;
                height: 38px;
                text-align: center;
                line-height: 38px;
                background-color: #eee;
                font-size: 14px;
                border: none;
                outline: none;
                &:hover{
                    cursor: pointer;
                    color: $primary_color;
                }
            }
            .sliped_test{
                display: none;
                position: absolute;
                bottom: -24px;
                color: red;
                font-size: 12px;
            }
        }
        .faster_reg{
            width: 300px;
            height: 45px;
            line-height: 45px;
            margin-top:40px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            border-radius: 4px;
            background-color: $primary_color;
         
        }
        .termes{
            width: 300px;
            margin-top:30px;
            font-size: 12px;
            display: flex;
            align-items: center;
            .tick{
                width: 14px;
                height: 14px;
                border: 1px solid #bdbdbd;
                
            }
            .tick.on{
                background: url(../img/agree.png) no-repeat 50%;
            }
            .serv_terme{
                display: flex;
            justify-content: center;
            align-items: center;
            margin-left:6px ;
            color: #bdbdbd;
            a{
               font-weight: 900;
               color: #666;
            }
            }
            
        }



    }

    .third_reg{
        position: absolute;
        left: 0px;
        bottom: 0px;
        width:100%;
        box-sizing: border-box;
        height: 80px;
        background-color: #F5F3EF;
        display: flex;
        align-items: center;
        padding: 25px;
        .third_img{
            width: 50%;
            height: 40px;
            margin-top: 13px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            @for $var from 1 through 4 {
                a:nth-child(#{$var}){
                    display: inline-block;
                    width: 30px;
                    height: 30px; 
                         
            
                } 
            }
            a:nth-child(1){
                background:url(../img/weixin.png) no-repeat 50%;
            }
            a:nth-child(2){
                background:url(../img/QQ.png) no-repeat 50%;
            }
            a:nth-child(3){
                background:url(../img/appsina.png) no-repeat 50%;
            }
            a:nth-child(4){
                background:url(../img/wangyi0.png) no-repeat 50%;
            }

        }
        p{
            width: 50%;
            height: 40px;
            line-height:40px;
            font-size: 12px;
            text-align: right;

        }
    }

}
